<template>
   <div class="my-tag">
               <input
               v-if="is"
               v-focus
               v-model.trim="name"
                class="input"
                @blur="is=false"
                @keydown.enter="fn2"
                type="text"
                placeholder="输入标签"
              /> 
              <div v-else
              @dblclick="fn"
               class="text">{{value}}</div>
            </div>
</template>

<script>
export default {
    props:{
value:{
    type:String,
    required:true

}
    },
    data (){
        return {
            is:false,
            name:''
        }
    },
    directives:{
        focus:{
            inserted(el){
                el.focus()
            }
        }
    },
    methods:{
        fn(){
            this.is=true
            this.name=this.value
        },
        fn2(){
            if(this.name===''){
                this.name='暂无'
            }
            this.is=false
            this.$emit('input',this.name)
        }
    }

}
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}

</style>